<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../public/css/basic.css"/>
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
    <link rel="stylesheet" href="../public/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="../public/css/manage.css"/>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <title></title>
    <style>

        body{min-width: 500px}
        .time,.cs{border: 1px solid #efefef;width: 400px;height:80px;padding-top: 30px;margin-bottom: 20px;margin-left: 40px;display: none}
        .tm{float: left;padding: 7px}
        .ti{width: 100px;display: inline-block;float: left}
    </style>
</head>
<body>

<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">区域</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value=""></option>
                <option value="0">区域1</option>
                <option value="1" selected="">区域2</option>
                <option value="2">区域3</option>
                <option value="3">区域4</option>
                <option value="4">区域5</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">区块</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value=""></option>
                <option value="0">区块1</option>
                <option value="1" selected="">区块2</option>
                <option value="2">区块3</option>
                <option value="3">区块4</option>
                <option value="4">区块5</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">设备名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入设备名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">设备编号</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入设备编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">设备ip</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入设备ip" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">参数显示</label>
        <div class="layui-input-block">
            <table class="layui-table">
                <tbody>
                     <tr>
                        <td><input  type="checkbox"  lay-filter="cb" lay-skin="primary" title="空气温度（℃）"></td>
                        <td><input  type="checkbox"  lay-filter="cb" lay-skin="primary" title="空气湿度（%）" ></td>
                        <td><input  type="checkbox"  lay-filter="cb" lay-skin="primary" title="光照强度（Lux）" ></td>
                        <td><input  type="checkbox"  lay-filter="cb" lay-skin="primary" title="大气压力（hPa）" ></td>
                     </tr>
                     <tr>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="风速（m/s）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="风向" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="降雨量（mm）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="土壤温度（℃）" ></td>
                     </tr>
                     <tr>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="土壤湿度（%）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="EC值（mS/cm）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="PH值" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="二氧化碳（ppm）" ></td>
                     </tr>
                     <tr>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="氨气浓度（ppm）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="硫化氢浓度（ppm）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="溶解氧（mg/L）" ></td>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="水温（℃）" ></td>
                     </tr>
                     <tr>
                         <td><input type="checkbox" lay-filter="cb"  lay-skin="primary" title="水位（M）" ></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">手动控制</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-filter="switch1" name="like[write]" title="打开">
        </div>
    </div>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">定时控制</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-filter="switch2" name="like[write]" title="打开">
        </div>
    </div>
    <div class="time">
        <span class="tm">开始时间</span>
        <input type="text" class="layui-input ti" id="time1" >
        <span class="tm">结束时间</span>
        <input type="text" class="layui-input ti" id="time2" >
    </div>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">参数控制</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-filter="switch3" name="like[write]" title="打开">
        </div>
    </div>
    <div class="cs">
        <span class="tm">启动值</span>
        <input type="text" class="layui-input ti"  >
        <span class="tm">关闭值</span>
        <input type="text" class="layui-input ti"  >
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="checkbox" checked=""  lay-skin="switch"  lay-text="是|否">

        </div>
    </div>


    <div class="but1-mid">
        <button class="layui-btn bc" type="button">保存</button>
    </div>

</form>

<script src="../public/layui/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //时间选择器
        var a =""
        var b =""
        laydate.render({
            elem: '#time1',
            type: 'time',
            done: function(value, date){
                a = value;
                console.log( a);
            }
        });
        laydate.render({
            elem: '#time2',
            type: 'time',
            done: function(value, date){
                b = value;
                console.log( b);

            }
        });



    });
    layui.use('form', function(){
        var form = layui.form;
//  通道的隐藏显示
        var flag=""
        form.on('checkbox(switch2)', function(data){
            flag =data.elem.checked;
            if(flag == true){
                $(".time").css("display","block")
            }else{
                $(".time").css("display","none")

            }

        });

        form.on('checkbox(switch3)', function(data){
            flag =data.elem.checked;
            if(flag == true){
                $(".cs").css("display","block")
            }else{
                $(".cs").css("display","none")

            }

        });
//        参数通道绑定到数组
        var td="  <div class='tdbox' style='display: inline-block;float:right;width: 150px;margin-top:7px'><span class='fl'>通道号</span><input  style='width: 50px;height: 20px' type='text'   class='layui-input fl tdh'> </div>"
        form.on('checkbox(cb)', function(data){
            flag =data.elem.checked;
            if(flag == true){
                $(this).parent().append(td);
            }else{
                $(this).siblings(".tdbox").remove();
            }
        });

    });


    $(".bc").click(function(){
        for(var i=0;i<$('.tdh').length;i++){
            console.log("名字："+$(".tdh").eq(i).closest('td').children('input').attr('title')+"通道号："+$(".tdh").eq(i).val());
        }

    })


</script>

</body>
</html>